<template>
	<view style="background-repeat: no-repeat;height: 480rpx;position: relative;" :style="{background:`url(${img})`,'backgroundSize':`100% 100%`}">
		<navbar title="任务详情" :back="true" color="#fff" bgColor="transparent" leftIconColor="#fff"></navbar>
		<view style="padding: 30rpx 20rpx;">
			<view style='color: #fff;width:650rpx;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;'>{{item.orderName}}</view>
			<view style="font-size:24rpx;color: #ccc;">
				<view style="margin: 10rpx 0;">主办方: {{item.businessName}}</view>
				<view class="">任务周期: {{item.addTime}} - {{item.beginTime}}</view>
			</view>
		</view>
		<view style="background-color: #fff;border-radius: 40rpx 40rpx 0 0;padding-top:40rpx;width: 100%;box-sizing: border-box;position: absolute;left: 0;top:90%;">
			<view style="padding: 0 40rpx;">
				<view style="display: flex;align-items:center;color: #999;font-size:24rpx;">
					<view style="font-size: 32rpx;color: #000;font-weight: 650;">任务进度</view>
					<view style="margin: 0 10rpx;">/</view>
					<view class="">邀约人数总进度</view>
				</view>
				<view :style="{background:`url(${img1})`,'backgroundSize':`100% 100%`}" style="background-repeat: no-repeat;padding: 20rpx 40rpx;border-radius: 10rpx;display: flex;align-items: center;justify-content: space-between;margin: 40rpx 0;">
					<view class="">
						<view style="font-size: 24rpx;color: #666;">{{`此任务还需邀约${item.failNum}人即可完成`}}</view>
						<view style="display: flex;align-items: center;color:#666;font-size: 24rpx;margin-top: 20rpx;">
							<view style="font-size: 32rpx;color: #fb3e25;">{{item.successNum}}</view>
							<view style="margin:0 6rpx;">/</view>
							<view class="">{{item.totalTaskNum}}人</view>
						</view>
					</view>
					<view style="color:#fff;font-weight: 650;font-size: 24rpx;background-color:red;padding:10rpx 30rpx;border-radius: 40rpx;" @click="godet(item.oid)">继续邀约</view>
				</view>
			</view>
			<view style="background-color:#fefefe;padding: 0 40rpx;">
				<view style="margin-bottom: 10rpx;">
					<u-tabs :list="navlist" @click="changTab" lineWidth="20" lineHeight="7" :linebg="`url(${lineBg})`" :inactiveStyle="{color:'#999999',fontWeight:'450'}" :activeStyle="{color:'#000',fontWeight:'650'}"></u-tabs>
				</view>
			    <view style="height:780rpx;overflow:scroll;">
					<view v-for="(item,index) in list" :key="index" style="display: flex;justify-content: space-between;align-items: center;padding: 20rpx 0;color:#666;font-size: 28rpx;border-top: 2rpx solid rgba(112, 112, 112,.05);">
						<view style='display: flex;align-items: center;'>
							<image :src="item.avatar" mode="" style="width:76rpx;height: 76rpx;border-radius: 50%;margin-right: 20rpx;"></image>
							<view class="">{{item.name}}</view>
						</view>
						<view class="">{{item.phone}}</view>
						<u-icon name="phone" color="#999999" size="28" @click='playphone(item.phone)'></u-icon>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import navbar from "@/components/baseNavbar.vue"
	import {getoffTaskDet,getoffTaskList} from "@/api/task.js"
	export default{
		components:{
			navbar
		},
		data(){
			return{
				img:'https://cdn.yowswl.com/image/admin/2023/11/29/4dfbe58c04564ecfb366d3b5cc1b732a1h62p0wnxr.png',
				img1:'https://cdn.yowswl.com/image/admin/2023/11/29/b1eb459bb038455b849d237f8ca1e0adupnspn7mn2.png',
				lineBg:'https://cdn.yowswl.com/image/admin/2023/11/29/cecb0f81edcd401c9b6ebf490fbbdd1191qtfnmipa.png',
				list:[
					{
						image:'https://cdn.yowswl.com/image/admin/2023/11/29/cecb0f81edcd401c9b6ebf490fbbdd1191qtfnmipa.png',
						name:'xiaom1',
						phone:'1234556765757',
					},
					{
						image:'https://cdn.yowswl.com/image/admin/2023/11/29/cecb0f81edcd401c9b6ebf490fbbdd1191qtfnmipa.png',
						name:'xiaom1',
						phone:'1234556765757',
					},{
						image:'https://cdn.yowswl.com/image/admin/2023/11/29/cecb0f81edcd401c9b6ebf490fbbdd1191qtfnmipa.png',
						name:'xiaom1',
						phone:'1234556765757',
					},{
						image:'https://cdn.yowswl.com/image/admin/2023/11/29/cecb0f81edcd401c9b6ebf490fbbdd1191qtfnmipa.png',
						name:'xiaom1',
						phone:'1234556765757',
					},{
						image:'https://cdn.yowswl.com/image/admin/2023/11/29/cecb0f81edcd401c9b6ebf490fbbdd1191qtfnmipa.png',
						name:'xiaom1',
						phone:'1234556765757',
					},{
						image:'https://cdn.yowswl.com/image/admin/2023/11/29/cecb0f81edcd401c9b6ebf490fbbdd1191qtfnmipa.png',
						name:'xiaom1',
						phone:'1234556765757',
					},{
						image:'https://cdn.yowswl.com/image/admin/2023/11/29/cecb0f81edcd401c9b6ebf490fbbdd1191qtfnmipa.png',
						name:'xiaom1',
						phone:'1234556765757',
					},{
						image:'https://cdn.yowswl.com/image/admin/2023/11/29/cecb0f81edcd401c9b6ebf490fbbdd1191qtfnmipa.png',
						name:'xiaom1',
						phone:'1234556765757',
					},{
						image:'https://cdn.yowswl.com/image/admin/2023/11/29/cecb0f81edcd401c9b6ebf490fbbdd1191qtfnmipa.png',
						name:'xiaom1',
						phone:'1234556765757',
					},{
						image:'https://cdn.yowswl.com/image/admin/2023/11/29/cecb0f81edcd401c9b6ebf490fbbdd1191qtfnmipa.png',
						name:'xiaom1',
						phone:'1234556765757',
					},{
						image:'https://cdn.yowswl.com/image/admin/2023/11/29/cecb0f81edcd401c9b6ebf490fbbdd1191qtfnmipa.png',
						name:'xiaom1',
						phone:'1234556765757',
					},
				],
				navlist:[{
					id:1,
					name:'我的邀约'
				},{
					id:0,
					name:'已取消'
				}],
				item:{},
				page: {
					page: 1,
					limit: 10,
					taskId:0,
					keyword:'',
					statue:1
				},
				loadend: false,
				loading: false,
			}
		},
		onLoad(option){
			if(option.id){
				this.page.taskId = option.id
				this.resetList()
				getoffTaskDet({id:option.id}).then(res=>{
					console.log('11',res.data);
					this.item = res.data
				})
			}
		},
		methods:{
			playphone(phone){
				console.log('1',phone);
				uni.makePhoneCall({
				// 手机号 这里可以直接写号码如 12345 也可以写获取号码的字段如this.mobile
				phoneNumber: phone, 
				// 成功回调
				success: (res) => {
					console.log('调用成功!')	
				},
				// 失败回调
				fail: (res) => {
					console.log('调用失败!')
				}
			  });
			},
			godet(id){
				uni.navigateTo({
					url:"/pages/sub/store/detail?id="+id
				})
			},
			changTab(e){
				this.page.statue = e.id
				console.log(this.page.statue);
				this.resetList()
			},
			resetList(callback){
				this.page.page = 1;
				this.loading = false
				this.loadend = false
				this.list = []
				this.getList(callback)
			},
			getList(callback) {
				if (this.loadend || this.loading)
					return
				this.loading = true
				getoffTaskList(this.page).then(res => {
					this.page.page++
					this.$set(this, 'list', this.list.concat(res.data.list))
					console.log('list',this.list);
					this.loading = false
					if (!res.data.hasNextPage)
						this.loadend = true
					if (callback != undefined) {
						callback()
					}
				}).catch(err => {
					this.loading = false
					this.loadend = true
					if (callback != undefined) {
						callback()
					}
				})
			},
		}
	}
</script>

<style>
</style>